<template>
  <div class="form_box">
    <a-form :model="formModel" :rules="rules" @finish="handleFinish">
      <p class="text">请输入手机号登录</p>
      <a-form-item name="username">
        <a-input
          class="reset-input"
          v-model:value="formModel.username"
          placeholder="管理员：admin，普通：test"
        >
          <template #prefix>
            <!-- <user-outlined class="icon" type="user" /> -->
            <Icon size="24px" type="shoujihaodenglu" class="icon" />
          </template>
        </a-input>
      </a-form-item>
      <p class="text">请输入密码</p>
      <a-form-item name="password">
        <a-input
          class="reset-input"
          v-model:value="formModel.password"
          type="password"
          placeholder="密码为 123456"
        >
          <template #prefix>
            <!-- <lock-outlined class="icon" /> -->
            <Icon size="24px" type="shurumimadenglu" class="icon" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-row>
          <a-col :span="12">
            <a-checkbox class="reset_checkbox" v-model:checked="checked"
              >自动登录</a-checkbox
            >
          </a-col>
          <a-col :span="12" class="text-right">
            <!-- <span class="gray_text">忘记密码?</span> -->
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" class="btn" :loading="loading"
          >立即登录</a-button
        >
      </a-form-item>
    </a-form>
    <p class="copyright">@copyright JS-banana</p>
  </div>
</template>
<script setup lang="ts">
import { Icon } from "@/components/index";

const loading = ref(false);

let state: any = reactive({
  otherQuery: {},
  redirect: undefined,
});

/* listen router change  */
const route = useRoute();
const router = useRouter();
let getOtherQuery = (query: any) => {
  return Object.keys(query).reduce((acc: any, cur) => {
    if (cur !== "redirect") {
      acc[cur] = query[cur];
    }
    return acc;
  }, {});
};

watch(
  route,
  (route) => {
    const query = route.query;
    if (query) {
      state.redirect = query.redirect;
      state.otherQuery = getOtherQuery(query);
    }
  },
  { immediate: true }
);

const rules: any = {
  username: [{ required: true, trigger: "blur", message: "请输入手机号" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
};

const checked = ref(true);
const formModel = reactive({
  username: "admin",
  password: "123456",
});

const handleFinish = async (values: any) => {
  // console.log(checked, values);
  console.log(values);
  loading.value = true;
  window.localStorage.setItem("token", "true");
  router.replace({
    path: state.redirect || "/operation/list",
    query: state.otherQuery,
  });
  loading.value = false;
  // if (res) {
  //   message.success("成功");
  //   // router.replace({ path: state.redirect || '/', query: state.otherQuery });
  //   router.replace("/");
  // }
};
</script>
<style lang="less">
.form_box {
  margin-top: 30px;
  .btn {
    width: 100%;
    height: 54px;
    background: linear-gradient(90deg, #00c3fd 0%, #3662f4 100%);
    border-radius: 6px;
    color: #ffffff;
    font-size: 20px;
    &:hover {
      opacity: 0.85;
      border: none;
    }
  }
  .icon {
    color: #666666;
  }
  .text {
    font-size: 14px;
    line-height: 20px;
    color: #999999;
    letter-spacing: 1.1px;
    margin-bottom: 10px;
  }
  .gray_text {
    font-size: 12px;
    color: #666666;
  }
  .reset_checkbox {
    .ant-checkbox-inner {
      border-radius: 50%;
    }
    & > span:last-child {
      font-size: 12px;
      color: #666666;
    }
  }
  .reset-input {
    height: 50px;
    line-height: 50px;
    border: 1px solid #707070;
    border-radius: 6px;
  }
  .copyright {
    margin-top: 20px;
    font-size: 12px;
    color: #999999;
    opacity: 0.85;
  }
}
</style>
